<template>
  <div>
    <div class="gs-content">
      <div class="gs-content-left">
        <div class="top-input">
          <el-input
            v-model="myValue"
            type="textarea"
            id="textarea"
            :rows="5"
            resize="none"
            :placeholder="$t('please_enter', { name: '' })"
          />
        </div>
        <div class="option-line-1">
          <el-button type="success" size="mini">{{
            $t("check_formula")
          }}</el-button>
          <div class="right-block">
            <el-select
              v-model="form.carryRule"
              :placeholder="$t('rounding_rules')"
              size="mini"
              style="width: 100px"
              @change="changeCarry"
            >
              <el-option
                :label="item.label"
                :value="item.value"
                v-for="(item, index) in carryList"
                :key="index"
              ></el-option>
            </el-select>
            <div class="right-block-input">
              {{ $t("retain")
              }}<el-input
                v-model="form.decimalPoint"
                maxlength="1"
                oninput="value=value.replace(/[^\d]/g,'')"
                size="mini"
                style="width: 40px; margin: 0 6px"
                @blur="changeCarry"
              />{{ $t("decimal_places") }}
            </div>
          </div>
        </div>
        <div class="option-line-2">
          <el-tabs
            v-model="activeName"
            type="border-card"
            @tab-click="handleClick"
          >
            <el-tab-pane :label="$t('system_data')" name="1">
              <div class="system-data">
                <el-select
                  v-model="form.systemData"
                  :placeholder="$t('please_select', { name: '' })"
                  size="small"
                  style="width: 200px"
                  filterable
                >
                  <el-option
                    :label="$t('attendance_ays')"
                    value="考勤数据的出勤天数"
                  ></el-option>
                  <el-option
                    :label="$t('days_late')"
                    value="考勤数据的迟到天数"
                  ></el-option>
                  <el-option
                    :label="$t('leave_days')"
                    value="考勤数据的请假天数"
                  ></el-option>
                  <el-option
                    :label="$t('annual_leave_days')"
                    value="考勤数据的年假天数"
                  ></el-option>
                  <el-option
                    :label="$t('holiday_days')"
                    value="假期数据的假期天数"
                  ></el-option>
                  <el-option
                    :label="$t('holiday_annual_leave_days')"
                    value="假期数据的年假天数"
                  ></el-option>
                  <el-option
                    :label="$t('fixed_salary')"
                    value="固定薪资"
                  ></el-option>
                  <el-option
                    :label="$t('temporary_compensation')"
                    value="临时薪资"
                  ></el-option>
                </el-select>
                <el-button type="text" @click="addSystemData">{{
                  $t("add")
                }}</el-button>
              </div>
            </el-tab-pane>
            <el-tab-pane :label="$t('salary_data')" name="2">
              <div class="system-data">
                <!-- <el-select
                v-model="form.salaryGroup"
                placeholder="请选择"
                size="small"
                style="width: 130px"
              >
                <el-option
                  :label="item.label"
                  :value="item.value"
                  v-for="(item, index) in salaryGroupList"
                  :key="index"
                ></el-option>
              </el-select> -->
                <el-select
                  v-model="form.salaryProject"
                  :placeholder="$t('please_select', { name: '' })"
                  size="small"
                  style="width: 130px"
                  filterable
                >
                  <el-option
                    :label="item.label"
                    :value="item.value"
                    v-for="(item, index) in salaryProjectList"
                    :key="index"
                  ></el-option>
                </el-select>
                <el-button type="text" @click="addSalaryData">{{
                  $t("add")
                }}</el-button>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
        <div class="option-line-3">
          <div
            class="option-item"
            v-for="(item, index) in operatorList"
            :key="index"
          >
            <el-button
              style="font-size: 18px"
              @click="clickOperatorItem(item.value)"
              >{{ item.value }}</el-button
            >
          </div>
        </div>
      </div>
      <div class="gs-content-right">
        <div class="title-box">{{ $t("insert_function") }}</div>
        <div class="content">
          <div
            class="fun-item"
            v-for="(item, index) in functionList"
            :key="index"
            @click="clickFunctionItem(item.value)"
          >
            <el-button
              style="
                display: block;
                width: 100%;
                font-size: 18px;
                text-align: left;
                border-radius: 0;
              "
              >{{ item.label }}</el-button
            >
          </div>
        </div>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">{{
        $t("confirm")
      }}</el-button>
      <el-button @click="cancel">{{ $t("cancel") }}</el-button>
    </div>
  </div>
</template>

<script>
import { listAllSalaryGroup } from "@/api/salary/salaryGroup";
import { listAllSalaryProject } from "@/api/salary/salaryProject";
export default {
  components: {},
  props: {
    value: {
      type: String,
      default: "",
    },
  },
  watch: {
    value(newValue) {
      this.myValue = newValue;
    },
    myValue(newValue) {
      this.$emit("input", newValue);
    },
  },
  data() {
    return {
      activeName: "1",
      myValue: "",
      form: {
        carryRule: null,
        decimalPoint: null,
        systemData: null,
        salaryGroup: null,
        salaryProject: null,
      },
      carryList: [
        {
          label: this.$t("rounding_nearest_integer"),
          value: "ROUND()",
        },
        {
          label: this.$t("round_down"),
          value: "ROUNDDOWN()",
        },
        {
          label: this.$t("round_up"),
          value: "ROUNDUP()",
        },
      ],
      operatorList: [
        {
          label: this.$t("addition"),
          value: "+",
        },
        {
          label: this.$t("subtract"),
          value: "-",
        },
        {
          label: this.$t("multiply"),
          value: "*",
        },
        {
          label: this.$t("divided_by"),
          value: "/",
        },
        {
          label: this.$t("remainder"),
          value: "%",
        },
      ],
      functionList: [
        {
          label: "SUM",
          value: "SUM()",
        },
        {
          label: "MIN",
          value: "MIN()",
        },
        {
          label: "MAX",
          value: "MAX()",
        },
        {
          label: "IF",
          value: "IF()",
        },
        {
          label: "AND",
          value: "&&",
        },
        {
          label: "OR",
          value: "||",
        },
        {
          label: "SIN",
          value: "SIN",
        },
      ],
      salaryGroupList: [],
      salaryProjectList: [],
    };
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
      listAllSalaryGroup().then((res) => {
        this.salaryGroupList = res.data.map((item) => {
          return {
            ...item,
            label: item.groupName,
            value: item.id,
          };
        });
      });
      listAllSalaryProject().then((res) => {
        this.salaryProjectList = res.data.map((item) => {
          return {
            ...item,
            label: item.projectName,
            value: item.id,
          };
        });
      });
    },
    handleClick() {},
    async insertVariable(value) {
      const myField = document.querySelector("#textarea");
      if (myField.selectionStart || myField.selectionStart === 0) {
        let startPos = myField.selectionStart;
        let endPos = myField.selectionEnd;
        this.myValue =
          myField.value.substring(0, startPos) +
          value +
          myField.value.substring(endPos, myField.value.length);
        await this.$nextTick(); // 这句是重点, 圈起来
        myField.focus();
        myField.setSelectionRange(endPos + value.length, endPos + value.length);
      } else {
        this.myValue = value;
      }
    },
    addSystemData() {
      this.insertVariable(this.form.systemData);
    },
    addSalaryData() {
      this.salaryProjectList.forEach((item) => {
        if (item.id == this.form.salaryProject) {
          this.insertVariable(item.projectDataSourceValue);
        }
      });
    },
    clickOperatorItem(value) {
      this.insertVariable(value);
    },
    clickFunctionItem(value) {
      this.insertVariable(value);
    },
    changeCarry() {
      if (this.form.carryRule && this.form.decimalPoint) {
        const fun = this.form.carryRule.slice(0, -1);
        this.myValue = this.myValue
          .slice(0, 0)
          .concat(fun, this.myValue + `,${this.form.decimalPoint})`);
      }
    },
    submitForm() {
      this.$emit("gsSubmitForm");
    },
    cancel() {
      this.$emit("gsCancel");
    },
  },
};
</script>

<style lang="scss">
.gs-content {
  width: 100%;
  height: 600px;
  display: flex;
  .gs-content-left {
    flex: 1;
    height: 100%;
    overflow: hidden;
    overflow-y: auto;
    border: 1px solid #efefef;
    padding: 0 16px;
    display: flex;
    flex-direction: column;
    .top-input {
      padding: 16px 0;
    }
    .option-line-1 {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .right-block {
        display: flex;
        align-items: center;
        font-size: 12px;
        .right-block-input {
          margin-left: 16px;
        }
      }
    }
    .option-line-2 {
      margin-top: 20px;
      .system-data {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
    }
    .option-line-3 {
      margin-top: 20px;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
      grid-gap: 16px;
    }
  }
  .gs-content-right {
    flex: 1;
    height: 100%;
    margin-left: 24px;
    border: 1px solid #efefef;
    display: flex;
    flex-direction: column;
    .title-box {
      width: 100%;
      padding: 16px;
      background: #f5f7fa;
      color: #333333;
      font-size: 16px;
      border-bottom: 1px solid #efefef;
    }
    .content {
      flex: 1;
      overflow: hidden;
      overflow-y: auto;
      .fun-item {
        color: #000000;
      }
    }
  }
}
.dialog-footer {
  margin-top: 40px;
  display: flex;
  justify-content: flex-end;
}
</style>
